<template>
  <div class="wzxq">
    <tabbar></tabbar>
    <!-- 头部展示 -->
    <div class="headerInfo">
      <div class="article-header">
        <div class="article-header-icon">
          <img src="@/assets/sthj/img/wzxq/7lz.png" alt="" />
          <img src="@/assets/sthj/img/wzxq/7lz.png" alt="" />
        </div>
        <p class="article-header-title">
          {{ detail.title }}
        </p>
      </div>
    </div>

    <!-- 主体内容展示 -->
    <div class="contentInfo">
      <div class="content-top">
        <div>
          <span>来源：{{ detail.source }}</span>
          <span>时间：{{ detail.pTime }}</span>
        </div>
        <button>打印</button>
      </div>
      <img src="@/assets/sthj/img/wzxq/fgx.png" class="content-img" />
      <div class="content-detail" v-html="detail.content"></div>
    </div>

    <!-- 底部导航栏 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../../components/sthj/footer.vue";
import tabbar from "../../../components/sthj/tabbar.vue";

export default {
  components: { tabbar, Footer },
  name: "HcsthjWzxq",

  data() {
    return {
      detail: {
        title: "通报3月和1-3月全国地表水、环境空气质量状况",
        pTime: "2021-05-05",
        source: "南雄市环境部",
        content: "通报3月和1-3月全国地表水、环境空气质量状况",
      },
    };
  },
  created() {
    this.getInit();
  },
  mounted() {},

  methods: {
    getInit() {
      let id = this.$route.query.id;
      this.request({
        url: this.$api.getSthjNewsDetail,
        data: {
          id,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.detail = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.wzxq {
  width: 100%;
  height: auto !important;
  background-color: #fafafa;
}
// 文章头部展示区域
.headerInfo {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-image: url("../../../assets/sthj/img/wzxq/1.png");
  .article-header {
    width: 1200px;
    height: 120px;

    background-color: white;
    padding: 20px 30px;
    .article-header-icon {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .article-header-title {
      margin-top: 24px;
      font-size: 24px;
      font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
      font-weight: 800;
      color: #333333;
      text-align: center;
    }
  }
}

//文章主要内容展示区域
.contentInfo {
  width: 1200px;
  margin: 0 auto;
  height: auto !important;
  background-color: white;
  padding: 0px 95px 95px 95px;
}
.content-top {
  width: 100%;
  height: 55px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    span {
      margin-left: 38px;
    }
  }
  button {
    width: 80px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #aaaaaa;
    margin-right: 28px;
  }
}
.content-detail {
  width: 100%;
  margin-top: 35px;
}
.content-img {
  width: 1010px;
}
</style>